<template>
    <div>
      <div id="chart3" style="width: 1200px; height: 400px;"></div>
    </div>
    </template>
    
    <script>
    import * as axios from 'axios'
    import * as echarts from 'echarts'

    export default {
      name: "myecharts",
      mounted() {
        this.initChart3()
      },
      methods: {
    
    initChart3() {
  const chart = echarts.init(document.getElementById('chart3'))
  axios.get('http://localhost:8080/product/echarts2').then(res => {
    let retData = res.data.data;
    const options = {
      title: {
        text: 'xxxx'
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b}: {c}'
      },
      legend: {
        data: ['商品价格']
      },
      xAxis: {
        type: 'category',
        data: retData.sexX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '商品价格',
          type: 'bar',
          data: retData.sexY
        }
      ]
    }
    chart.setOption(options)
  })
}
      }
    }
    </script>
    <style scoped>
    </style>